
import './ModifyWorkPlan.scss'

import { Spin, Button, Popconfirm, Tooltip } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import { FormTemplate } from '../../Utils/FormTemp'

import { DeleteOutlined } from '@ant-design/icons'

const Columns = [
    {
        dataIndex: 'uuid',
        valueType: 'Hidden',
    },
    {
        title: '标题',
        dataIndex: 'title',
        valueType: 'Input',
        rules: true,
    },
    {
        title: '内容',
        dataIndex: 'content',
        valueType: 'TextArea',
        rules: true,
    },
    {
        title: '开始时间',
        dataIndex: 'start',
        valueType: 'TimePicker',
        rules: true,
    },
    {
        title: '结束时间',
        dataIndex: 'end',
        valueType: 'TimePicker',
    },
    {
        title: '事件类型',
        dataIndex: 'type',
        valueType: 'Select',
        valueEnum: {
            info: { text: '进行中', status: 'processing', disabled: true },
            success: { text: '已完成', status: 'success' },
            warning: { text: '报警中', status: 'warning' },
            error: { text: '报错中', status: 'error' },
        },
        rules: true,
    },
    // {
    //     title: '提醒设置',
    //     dataIndex: 'remind',
    //     valueType: 'Select',
    //     valueEnum: { 0: '无需提醒', 1: '提醒' },
    // },
]

const ModifyWorkPlan = ({ data, ModalEvent, Off }) => {
    const [Loading, setLoading] = useState(true)
    const [InitData, setInitData] = useState()
    const [Type, setType] = useState(false)
    useMount(() => {
        if (typeof (data) === 'object') {
            setInitData(data)
            setType(true)
        }
        setLoading(false)
    })
    const onDelete = () => ModalEvent.emit({ type: 'Delete', data: data.uuid })
    ModalEvent.useSubscription(val => { if (val.type === 'Off') Off() })


    return (
        <div className='ModifyWorkPlan'>
            <Spin spinning={Loading}>
                {!Loading &&
                    <>
                        <FormTemplate columns={Columns} ModalEvent={ModalEvent} init={InitData} />
                        {Type &&
                            <Tooltip title="删除记录" placement='right'>
                                <Popconfirm
                                    title="操作提醒"
                                    description="是否要删除该条记录?"
                                    onConfirm={onDelete}
                                    okText="删除"
                                    cancelText="取消"
                                >
                                    <Button className='Delete' type='primary' danger shape="circle" icon={<DeleteOutlined />} />
                                </Popconfirm>
                            </Tooltip>
                        }
                    </>
                }
            </Spin>
        </div>
    )
}

export default ModifyWorkPlan